import React, { useEffect, useState } from 'react';
import './securitypromptdialog.css'
import { saveEvent } from '@/store/actions/saveEvent';
import { useDispatch } from 'react-redux';
import { Mask } from 'antd-mobile';
import icon_security_prompt from '@/assets/icon_security_prompt.png';
import icon_security_prompt_close from '@/assets/icon_security_prompt_close.png';


export default function SecurityPromptDialog({ visible, onClose }) {

    //获取 Redux 分发器
    const dispatch = useDispatch()

    const [needDisplay, setNeedDisplay] = useState(false);

    //监听
    useEffect(() => {
        setNeedDisplay(visible)
    }, [visible])

    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    //点击监听
    const onHandleCloseClick = () => {
        // 打点
        doHitEvent("SECURITY_PROMPT_DIALOG_CLOSE_CLICK", "")
        // 回调
        onClose && onClose()
    }

    return (
        <Mask visible={needDisplay} opacity={0.75}
            onMaskClick={() => { }}>
            <div className="securityPromptDialogOverlayBg">
                <div className="securityPromptDialogOverlayContent">
                    <div className='securityPromptDialogTitle'>If you encounter a security prompt when installing the APP, please refer to the guide below to complete the installation.</div>
                    <img className='securityPromptDialogGuideImage' src={icon_security_prompt} alt='' />
                    <img className='securityPromptDialogIconClose' src={icon_security_prompt_close} alt='' onClick={onHandleCloseClick} />
                </div>
            </div>
        </Mask >
    );
};
